<template>
  <div class="material-supply">
    <BasicCard class="art-table-card">
      <BasicVxeTable v-bind="gridOptions">
        <template #slot="{ row, column, columnIndex }">
          <el-input
            v-model="row['searchval' + columnIndex]"
            v-if="row.processName == '筛选'"
            :suffix-icon="Search"
            :key="column.field"
            @input="
              (val) => {
                handleInput(val, column)
              }
            "
          ></el-input>
          <template v-else>
            <div
              v-for="item in row[column.field]"
              :key="item.craftNodeListId"
              :style="{
                color: item.isReady || item.isHasFatherNode ? '#1a1a1c' : '#ea250b',
                display: !item.visible ? 'none' : 'block'
              }"
              @click="getDetail(item)"
            >
              {{ item.materialName }}
            </div>
          </template>
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import XEUtils from 'xe-utils'
  import { Search } from '@element-plus/icons-vue'
  import {
    getGongYiAndPingZhong,
    getHuoQuPingZhongTree,
    getTeDingJieGouTu
  } from '@/api/shengChanSheZhi'

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: '品种列表',
      isCustom: false,
      isExport: false,
      isFilterAndSort: false
    }, // 拓展的配置
    rowConfig: {
      isCurrent: false,
      isHover: false
    },
    stripe: false,
    id: `material-supply`, // id用于缓存,务必配置
    height: 420,
    loading: true,
    // columns: handleColumns(),
    toolbarConfig: {} // 工具栏
  })

  const handleColumns = (res) => {
    const temp: BasicGridColumnProps[] = [
      {
        title: '工序',
        field: 'processName',
        width: 100
      }
    ]
    res.map((item, index) => {
      temp.push({
        title: item.craftNode.name,
        field: 'column' + (index + 1),
        slots: { default: 'slot' }
      })
    })

    gridOptions.columns = temp
  }

  const listData = ref<any>([])
  const getList = () => {
    getGongYiAndPingZhong()
      .then((res: any) => {
        gridOptions.loading = false
        res.sort((a, b) => {
          return a.craftNode.sortNum - b.craftNode.sortNum
        })

        handleColumns(res)
        const tempData = [{ processName: '筛选' }, { processName: '品种' }]

        res.map((value, index) => {
          tempData[0]['searchval' + (index + 1)] = ''
          tempData[1]['column' + (index + 1)] = value.varieties.filter((res) => {
            res.visible = true
            return res.isCurrent == true
          })
        })
        console.log(tempData)
        listData.value = tempData
        gridOptions.data = tempData
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  const handleInput = (val, column) => {
    listData.value[1][column.field].map((item) => {
      item.visible = item.materialName.includes(val)
    })
  }

  const stepData = ref<any>([])
  const getDetail = (data) => {
    getTeDingJieGouTu({
      MaterialGuid: data.materialId
    }).then((res) => {
      XEUtils.eachTree([res], (item: any) => {
        stepData.value.push(item.label)
      })
    })
  }

  onMounted(() => {
    getList()
  })
</script>
<style scoped lang="scss">
  :deep(.vxe-table--body) {
    tr:last-child {
      td:nth-child(n + 2) {
        div.vxe-cell {
          height: 253px !important;
          & > div {
            height: 100%;
            overflow: auto !important;
          }
        }
      }
    }
  }
</style>
